<template>
	<section class="index">
		<common-head></common-head>
		<div id="bg">
			<img src="../assets/background.png" style="width: 100%;"/>
		</div>
		<div class="enter">
			<p class="first">欢迎使用自助入住登记系统</p>
			<p  class="second" @click="hasCheck">已预订</p>
			<p  class="third" @click="unCheck">未预订</p>
		</div>
	</section>
</template>

<script>
	import commonHead from "@/components/head"
	export default{
		components:{
			commonHead
		},
		data(){
			return{

			}
		},
		methods:{
			hasCheck(){/*已经预订*/
				this.$store.commit('switchOrder',true);
				console.log(this.$store.state.hasOrder)
				this.$router.push({name:'orderSearch'})
			},
			unCheck(){/*未预订*/
				this.$store.commit('switchOrder',false);
				console.log(this.$store.state.hasOrder)
				this.$router.push({name:'checkIn'})
			}
		}
	}
</script>

<style scoped="scoped">
	.index{
		height: 100%;
		position: relative;
		overflow: hidden;
	}
	.enter{
		width: 450px;
		height: 250px;
		margin: auto;
		background: #fff;
		position: absolute;
		top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	border-radius: 4px;
    	text-align: center;
	}
	.enter p{
		/*margin: 18px 0;*/
	}
	.enter .first{
		font-size: 27px;
		color: rgb(214,114,2);
		letter-spacing: 2px;
		margin: 20px 0;
	}
	.enter .second,.enter .third{
		width: 320px;
		height: 45px;
		border: solid 1px rgb(214,114,2);
		border-radius: 20px;
		    display: inline-block;
		    line-height: 45px;
		    font-size: 18px;
		    letter-spacing: 1px;
	}
	.enter .second{
		color: #FFFFFF;
		background: rgb(214,114,2);
		margin: 15px 0;
		cursor: pointer;
	}
	.enter .third{
		margin: 15px 0;
		cursor: pointer;
	}
</style>
